<template>
	<view class="page-content">
		<cu-custom dataHeight="100" :isBack="true" style="width: 100%;">
			<block slot="content">
				<text class="text-xl">加点模拟</text>
			</block>
		</cu-custom>
		<view class="head1">
			<image class="bg-set1" :src="bgimage"></image>
			<view class="meng1"></view>
		</view>
		<view class="info">
			<navigator url="/pages/index/peizhuang/index?type=2">
				<view class="info-left">
					<image class="head-image" :src="icon_wuxing" mode="aspectFit"></image>
				</view>
			</navigator>
			<view class="info-right padding-left-sm">
				<view class="title">
					{{ name }}
				</view>
				<view class="info-detail">
					{{ info }}
				</view>
			</view>
		</view>
		<!-- 分配点 -->
		<view class="items">
			<view class="item" v-for="(item, index) in lists" :key="index">
				<view class="item-left">
					<image :src="item.src" class="item-image"></image>
					<text class="item-text">{{item.text}}</text>
					<view class="process">
						<view class="process-num" :style="item.style">
							<text class="process-num-text">{{item.values}}</text>
						</view>
						<view class="cu-progress">
							<view class="bg-blue round" :style="item.style"></view>
						</view>
					</view>
				</view>
				<view class="item-right" v-if="from === null">
					<view class="add-btn jn-btn" @click="addJi(index)">
						+
					</view>
					<view class="jian-btn jn-btn" @click="jianJi(index)">
						-
					</view>
				</view>
			</view>
		</view>
		<view class="num flex align-center">
			<view class="flex flex-sub align-center">
				<text class="margin-lr-sm flex-sub">等级：</text>
				<view class="padding-sm flex-twice">
					<input type="number" placeholder="0" v-model.lazy="level" :disabled="from !== null" class="padding-lr-sm bg-grey radius" />
				</view>
			</view>
			<view class="flex-sub text-right">
				<text>可分配潜能点 {{all}}</text>
			</view>
		</view>

		<view class="grid col-3 margin-top">
			<view class="padding-tb-xs" v-for="(item, index) in dynamicItems" :key="index">
				<text class="text-white margin-right-xs">{{ item.label }}:</text>
				<text class="text-yellow">{{ item.text }}</text>
			</view>
		</view>

		<view class="bottom" v-if="from === null">
			<view class="bottom-left">
				<view class="reset-btn btn" :style="resetcolor" @click="resetAll">重置潜能</view>
			</view>
			<view class="bottom-right">
				<view class="save-btn btn" @click="showModal = true">保存分配</view>
			</view>
		</view>
		
		<view class="cu-modal show" v-if="showModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">保存分配</view>
					<view class="action" @click="showModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="solid-top">
					<view class="cu-form-group">
						<view class="title">标题<text class="text-red">*</text></view>
						<input type="text" value="" v-model="title" class="text-left" />
					</view>
					<textarea value="" v-model="description" placeholder="请输入配点方案的简介或描述" class="text-left padding" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-gradual-blue-plus margin-left" @click="handleSave">保存</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 注册自定义导航组件
	import cuCustom from '@/libs/colorui/components/cu-custom.vue';
	
	// 引入封装的网络请求
	import { handleRequest } from '@/common/request.js'

	import groups from '@/utils/init/groups.js'

	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				icon_wuxing: "",
				src: "https://jianxia.mazhoudao.com/h5/static/home/peizhuang/select.png",
				bgimage: "https://jianxia.mazhoudao.com/h5/static/home/menpai/emei.png",
				all: 0,
				allB: 0,
				level: 1,
				max: 0,
				resetcolor: "color:#728C98",
				rolelist:[],
				// uid
				nUid: 0,
				
				// 来路，用来控制加点方案是否可以编辑
				from: null,
				
				// 门派ID
				mainId: 0,
				
				// 门派分支ID
				branchId: 1,
				
				// 类型
				nType: 2,

				// 数据ID
				nIndex: 0,

				// 弹窗状态
				showModal: false,

				// 标题
				title: '',

				// 描述
				description: '',

				// 动态类目对应的属性
				dynamicProps: ['blood', 'internalForce', 'powerPhysical', 'hit', 'dodge', 'leftAttack'],
				
				// 动态类目对应的特殊属性
				dynamicSpecialProps: ['blood', 'internalForce', 'powerPhysical'],
				
				// 动态类目
				dynamicItems: {},
				
				// 当前五行元素，通过计算得出
				// currentElement: 'gold',
				
				// 五行对应的属性
				fiveElements: {
					gold: {
						// 初始
						init: {
							// 力量
							power: 35,
							// 外功
							powerExternal: 25,
							// 身法
							bodyMethod: 25,
							// 内功
							powerInternal: 25,
							// 生命
							blood: 204,
							// 内力
							internalForce: 16,
							// 体力
							powerPhysical: 180,
							// 左键杀伤
							leftAttack: 8,
							// 右键杀伤
							rightAttack: 8,
							// 命中
							hit: 72,
							// 闪避
							dodge: 6,
							// 跑速
							speedRun: 10,
							// 攻速
							speedAttack: 0,
						}
					},
					wood: {
						// 初始
						init: {
							// 力量
							power: 20,
							// 外功
							powerExternal: 20,
							// 身法
							bodyMethod: 35,
							// 内功
							powerInternal: 35,
							// 生命
							blood: 103,
							// 内力
							internalForce: 77,
							// 体力
							powerPhysical: 180,
							// 左键杀伤
							leftAttack: 5,
							// 右键杀伤
							rightAttack: 5,
							// 命中
							hit: 112,
							// 闪避
							dodge: 8,
							// 跑速
							speedRun: 10,
							// 攻速
							speedAttack: 0,
						}
					},
					water: {
						// 初始
						init: {
							// 力量
							power: 25,
							// 外功
							powerExternal: 25,
							// 身法
							bodyMethod: 25,
							// 内功
							powerInternal: 25,
							// 生命
							blood: 153,
							// 内力
							internalForce: 77,
							// 体力
							powerPhysical: 180,
							// 左键杀伤
							leftAttack: 6,
							// 右键杀伤
							rightAttack: 6,
							// 命中
							hit: 72,
							// 闪避
							dodge: 6,
							// 跑速
							speedRun: 10,
							// 攻速
							speedAttack: 0,
						}
					},
					fire: {
						// 初始
						init: {
							// 力量
							power: 30,
							// 外功
							powerExternal: 30,
							// 身法
							bodyMethod: 20,
							// 内功
							powerInternal: 20,
							// 生命
							blood: 213,
							// 内力
							internalForce: 41,
							// 体力
							powerPhysical: 180,
							// 左键杀伤
							leftAttack: 7,
							// 右键杀伤
							rightAttack: 7,
							// 命中
							hit: 52,
							// 闪避
							dodge: 5,
							// 跑速
							speedRun: 10,
							// 攻速
							speedAttack: 0,
						}
					},
					earth: {
						// 初始
						init: {
							// 力量
							power: 20,
							// 外功
							powerExternal: 25,
							// 身法
							bodyMethod: 15,
							// 内功
							powerInternal: 40,
							// 生命
							blood: 76,
							// 内力
							internalForce: 163,
							// 体力
							powerPhysical: 180,
							// 左键杀伤
							leftAttack: 5,
							// 右键杀伤
							rightAttack: 5,
							// 命中
							hit: 32,
							// 闪避
							dodge: 3,
							// 跑速
							speedRun: 10,
							// 攻速
							speedAttack: 0,
						}
					}
				},
				
				// 每升一级，初始属性要加的对应属性
				levelInitRelations: {
					gold: {
						blood: 4,
						internalForce: 1
					},
					wood: {
						blood: 3,
						internalForce: 2
					},
					water: {
						blood: 3,
						internalForce: 2
					},
					fire: {
						blood: 3,
						internalForce: 2
					},
					earth: {
						blood: 1,
						internalForce: 3
					}
				},
				
				// 属性点对应的关系
				elementRelations: {
					// 力量
					power: {
						// 金
						gold: {
							leftAttack: 0.2,
						},
						wood: {
							leftAttack: 0.2,
						},
						water: {
							leftAttack: 0.2,
						},
						fire: {
							leftAttack: 0.2,

						},
						earth: {
							leftAttack: 0.2,
						}
					},
					// 外功
					powerExternal: {
						// 金
						gold: {
							// 1点外功对应8点生命上限
							blood: 8,
						},
						wood: {
							blood: 5,
						},
						water: {
							blood: 6,
						},
						fire: {
							blood: 7,
						},
						earth: {
							blood: 3,
						}
					},
					// 身法
					bodyMethod: {
						// 金
						gold: {
							leftAttack:0.2,
							// 1点身法对应4点命中
							hit: 4,
							// 1点身法对应0.25点闪避
							dodge: 0.25
						},
						wood: {
							leftAttack:0.2,
							hit: 4,
							dodge: 0.25
						},
						water: {
							leftAttack:0.2,
							hit: 4,
							dodge: 0.25
						},
						fire: {
							leftAttack:0.2,
							hit: 4,
							dodge: 0.25
						},
						earth: {
							leftAttack:0.2,
							hit: 4,
							dodge: 0.25
						}
					},
					// 内功
					powerInternal: {
						// 金
						gold: {
							// 1点内功对应1点内力上限
							internalForce: 1
						},
						wood: {
							internalForce: 3
						},
						water: {
							internalForce: 3
						},
						fire: {
							internalForce: 2
						},
						earth: {
							internalForce: 4
						}
					}
				},
				
				info1: [
					{
						name: 'blood',
						label: "生命"
					},
					{
						name: 'internalForce',
						label: "内力"
					},
					{
						name: 'powerPhysical',
						label: "体力"
					},
					{
						name: 'hit',
						label: "命中"
					},
					{
						name: 'dodge',
						label: "闪避"
					},
					{
						name: 'leftAttack',
						label: "攻击"
					}
				],
				lists: [{
						name: 'power',
						src: "https://jianxia.mazhoudao.com/h5/static/home/jineng/liliang.png",
						text: "力量",
						values: 0,
						style: "width:0%"
					},
					{
						name: 'powerExternal',
						src: "https://jianxia.mazhoudao.com/h5/static/home/jineng/waigong.png",
						text: "外功",
						values: 0,
						style: "width:0%"
					},
					{
						name: 'bodyMethod',
						src: "https://jianxia.mazhoudao.com/h5/static/home/jineng/shenfa.png",
						text: "身法",
						values: 0,
						style: "width:0%"
					},
					{
						name: 'powerInternal',
						src: "https://jianxia.mazhoudao.com/h5/static/home/jineng/neigong.png",
						text: "内功",
						values: 0,
						style: "width:0%"
					}
				],
				listsBack: [{
						name: 'power',
						src: "https://jianxia.mazhoudao.com/h5/static/home/jineng/liliang.png",
						text: "力量",
						values: 0,
						style: "width:0%"
					},
					{
						name: 'powerExternal',
						src: "https://jianxia.mazhoudao.com/h5/static/home/jineng/waigong.png",
						text: "外功",
						values: 0,
						style: "width:0%"
					},
					{
						name: 'bodyMethod',
						src: "https://jianxia.mazhoudao.com/h5/static/home/jineng/shenfa.png",
						text: "身法",
						values: 0,
						style: "width:0%"
					},
					{
						name: 'powerInternal',
						src: "https://jianxia.mazhoudao.com/h5/static/home/jineng/neigong.png",
						text: "内功",
						values: 0,
						style: "width:0%"
					}
				],
			}
		},
		onLoad(e) {
			if (e.mainId) this.mainId = e.mainId
			if (e.branchId) this.branchId = e.branchId
			if (e.from) this.from = e.from

			this.nUid = uni.getStorageSync('uid');
			this.nIndex = e.nIndex;
			if (this.nIndex == undefined) {
				this.choose_type = e.choose_type;
				this.selectTypeIndex = e.selectTypeIndex;
			} else {
				this.handleInitProps();
			}
			this.bgimage = e.name ? "https://jianxia.mazhoudao.com/h5/static/home/menpai/" + e.name + ".png" : "https://jianxia.mazhoudao.com/h5/static/home/menpai/emei.png";
			this.rolelist = this.$Global.JobType;
			this.icon_wuxing = this.$Global.WuXing_Res[this.rolelist[this.choose_type].WX_type].res;
			if (this.nIndex > 0) {
				this.handleLoadData();
			} else {
				this.computedDynamicItemsByElement(this.currentElement, true);
			}
		},
		computed: {
			currentElement: {
				get() {
					if (this.nIndex > 0) {
						let dataFromStorage = uni.getStorageSync(`nIndex:${this.nType}:${this.nIndex}`);
						const name = dataFromStorage.sMemPai.split('·')[0];
						
						return this.handleGetCurrentElementByName(name);
					} else {
						return groups[this.mainId].element;
					}
				}
			},
			name: {
				get() {
					if (this.nIndex > 0) {
						let dataFromStorage = uni.getStorageSync(`nIndex:${this.nType}:${this.nIndex}`);
						
						return dataFromStorage.sMemPai || '天王·刀天王';
					} else {
						return this.mainId !== undefined ? groups[this.mainId]['list'][this.branchId].full_name : '天王·刀天王';
					}
				},
				set(newVal) {
					
				}
			},
			info: {
				get() {
					if (this.nIndex > 0) {
						let info = '';
						groups.some(item => {
							return item.list.some((item) => {
								if (item.full_name === this.name) {
									info = item.desc;
									return item.full_name === this.name;
								}
							})
						})
						
						return info;
					} else {
						return this.mainId !== undefined ? groups[this.mainId]['list'][this.branchId].desc : '活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。';
					}
				},
				set(newVal) {
					
				}
			}
		},
		watch: {
			// 可分配总点数
			level(now) {
				let usedPoints = this.handleGetUsedPoints();
				let minLevel = 1;

				if (usedPoints > 0) {
					// 向上取整
					minLevel += Math.ceil(usedPoints / 5);
					
					if (minLevel > now) {
						this.level = minLevel;
						this.all = (minLevel - 1) * 5 - usedPoints;

						uni.showModal({
							title: '提示',
							content: `当前方案要求等级最低为${minLevel}`,
							showCancel: false,
							success() {}
						})
					} else {
						let all = (now - 1)  * 5;
						
						if (all >= usedPoints) {
							all -= usedPoints;
							
							this.all = all;
						} else {
							this.level = minLevel;
							this.all = (minLevel - 1) * 5 - usedPoints;

							uni.showModal({
								title: '提示',
								content: `当前方案要求等级最低为${minLevel}`,
								showCancel: false,
								success() {}
							})
						}
					}
				} else {
					this.all = (now -1) * 5;
				}
				
				this.dynamicItems.map(item => {
					// 算上等级初始值
					if (this.levelInitRelations[this.currentElement][item.name] > 0 && this.level > 1) {
						console.log(item);
						item.value = item.init + this.levelInitRelations[this.currentElement][item.name] * (this.level - 1);
						if (this.dynamicSpecialProps.indexOf(item.name) >= 0) {
							item.text = `${item.value}/${item.value}`;
						}
					}
				})
			}
		},
		methods: {
			handleInitProps() {
				let dataFromStorage = uni.getStorageSync(`nIndex:${this.nType}:${this.nIndex}`);
				let fullName = dataFromStorage.sMemPai;
				let name = fullName.split('·')[0];
				
				groups.some(res => {
					if (res.name === name) {
						// 赋值给门派
						this.choose_type = res.id;
						res.list.some(r => {
							if (r.full_name === fullName) {
								// 赋值给门派分支
								this.selectTypeIndex = r.id;
							}
						})
						return;
					}
				})
			},
			handleGetCurrentElementByName(name) {
				let item = {}
				
				groups.some(res => {
					if (res.name === name) {
						return item = res;
					}
				});
				
				return item.element;
			},
			// 获取已经使用的点数
			handleGetUsedPoints() {
				let points = 0;

				this.lists.map(item => {
					points += item.values;
				});

				return points;
			},
			// 获取动态属性
			computedDynamicItemsByElement(element, init = false) {
				console.log(element, init)
				if (init) {
					let initItem = this.fiveElements[element].init;
					
					this.dynamicItems = this.info1.map(item => {
						let text = '';
						let value = initItem[item.name];

						if (this.dynamicSpecialProps.indexOf(item.name) >= 0) {
							text = `${value}/${value}`;
						} else {
							text = value;
						}

						return {
							name: item.name,
							label: item.label,
							text: text,
							value: value,
							init: value
						}
					});
				}
			},

			// 更新动态属性
			updateDynamicItems(name, value) {
				this.dynamicItems.map(item => {
					// 算上等级初始值
					if (this.levelInitRelations[this.currentElement][item.name] > 0 && this.level > 1) {
						item.withLevel = true;
						item.value = item.init + this.levelInitRelations[this.currentElement][item.name] * (this.level - 1);
						if (this.dynamicSpecialProps.indexOf(item.name) >= 0) {
							item.text = `${item.value}/${item.value}`;
						}
					}
				})
				
				// 只更新需要更新的
				let info = this.elementRelations[name][this.currentElement];
				let needUpdate = [];
				
				if (info !== null) {
					Object.keys(info).map(item => {
						if (this.dynamicProps.indexOf(item) >= 0) {
							needUpdate.push(item);
						}
					})
				}

				if (needUpdate.length > 0) {
					// 重新渲染视图
					this.dynamicItems.filter((item, index) => {
						
						if (needUpdate.indexOf(item.name) >= 0) {
							let text = '';
							
							if (item.withLevel) {
								item.value += Math.floor(info[item.name] * value);
							} else {
								item.value = Math.floor(info[item.name] * value + item.init);
							}
							
							if (this.dynamicSpecialProps.indexOf(item.name) >= 0) {
								text = `${item.value}/${item.value}`;
							} else {
								text = item.value;
							}
							item.text = text;
						}
						
						return item;
					})
				}
			},
			
			// 从数据库加载配置
			handleLoadData() {
				this.computedDynamicItemsByElement(this.currentElement, true);

				const dataFromStorage = uni.getStorageSync(`nIndex:${this.nType}:${this.nIndex}`);

				if (dataFromStorage) {
					if (typeof dataFromStorage.sProgramme === 'string') {
						dataFromStorage.sProgramme = JSON.parse(dataFromStorage.sProgramme);
					}
					this.name = dataFromStorage.sMemPai;
					this.level = dataFromStorage.sProgramme.level;
					this.all = dataFromStorage.sProgramme.all;

					if (dataFromStorage.sProgramme.lists.length > 0) {
						this.lists = dataFromStorage.sProgramme.lists.map(item => {
							if (item.values > 0) {
								this.updateDynamicItems(item.name, item.values);
							}

							return item;
						})
					}
				} else {
					// 找不到数据就直接初始化
					this.nIndex = 0;
				}
			},

			// 保存
			async handleSave() {
				if (this.title == '') {
					uni.showToast({
						icon: 'error',
						title: '参数不正确',
					})
					return;
				}
				
				let params = {
					cmd: 'savebytype',
					nType: this.nType,
					nIndex: this.nIndex || 0,
					sTitle: this.title,
					sDescribe: this.description,
					nUid: this.nUid,
					sMemPai: this.name,
					sProgramme: JSON.stringify({
						level: this.level,
						all: this.all,
						lists: this.lists
					})
				};
				
				await handleRequest(params).then(res => {
					if (res.responseCode === '100') {
						uni.showToast({
							title: '保存成功',
							success: () => {
								this.showModal = false;
							}
						});
					} else {
						uni.showToast({
							icon: 'error',
							title: '保存失败',
							success: () => {}
						});
					}
				})
			},

			addJi(index) {
				if (this.level === 0 || this.all <= 0) {
					uni.showToast({
						icon: 'error',
						title: this.level > 1 ? '请先提升等级' : '请先选择等级',
						duration: 1500,
					});
					return;
				}

				if (this.all > 0) {
					this.resetcolor = "color:#FFFFFF"
					this.lists[index].values += 1
					this.all -= 1

					let process = this.lists[index].values / (this.level * 5) * 100

					this.lists[index].style = `width: ${process}%`
				} else {
					this.resetcolor = "color:#728C98"
				}

				// 更新动态属性
				this.updateDynamicItems(this.lists[index].name, this.lists[index].values);
			},

			jianJi(index) {
				if (this.lists[index].values > 0) {
					this.lists[index].values = this.lists[index].values - 1
					this.all = this.all + 1
					let process = this.lists[index].values / (this.level * 5) * 100
					this.lists[index].style = "width:" + process + "%"
				}
				
				// 更新动态属性
				this.updateDynamicItems(this.lists[index].name, this.lists[index].values);
			},
			resetAll() {
				this.level = 1
				this.resetcolor = "color:#728C98"
				for (var i = 0; i < this.lists.length; i++) {
					this.lists[i].values = 0
					this.lists[i].style = "width:" + 0 + "%"
				}
				this.lists = this.listsBack
				
				// 初始化动态属性
				this.computedDynamicItemsByElement(this.currentElement, true);
			}
		}
	}
</script>

<style scoped>
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}

	page {
		background-color: #1F282C;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 60rpx;
		background-color: #1F282C;
		min-height: 100vh;
	}

	.bottom {
		width: 100%;
		background-color: #1F282C;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.head {
		display: flex;
		float: left;
		/* z-index: 10000; */
		width: 100%;
		height: 326rpx;
		background-color: #1F282C;
	}

	.head1 {
		/* 		display: flex; */
		float: left;
		z-index: 2;
		width: 100%;
		height: 326rpx;
		margin-top: -200rpx;
		background-color: #1F282C;
	}

	.bg-set1 {
		/* position: fixed; */
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.meng1 {
		/* position: fixed; */
		/* margin-top: 68rpx; */
		margin-top: -176rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}


	.meng {
		position: fixed;
		margin-top: 68rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}

	.info {
		display: flex;
		float: left;
		z-index: 10001;
		width: 92%;
		height: 200rpx;
		margin-top: -100rpx;
		background-color: #405C69;
		border-radius: 10px;
	}

	.head-image {
		height: 76rpx;
		width: 50rpx;
		border-top-left-radius: 20rpx;
	}

	.info .info-left {
		height: 100%;
	}

	.info .info-right {
		overflow: hidden;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}

	.info .info-right .title {
		margin-top: 16rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
	}

	.info .info-right .info-detail {
		margin-top: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #A0AAAF;
		font-size: 24rpx;
		line-break: 3;

	}

	.items {
		background-color: #1F282C;
		display: flex;
		width: 100%;
		z-index: 10001;
		flex-wrap: wrap;
		padding-top: 10rpx;
		margin-top: 30rpx;
	}

	.item {
		width: 100%;
		height: 120rpx;
		display: flex;
	}

	.item-left {
		width: 75%;
		margin-top: 10rpx;
		display: flex;
	}

	.process {
		height: 60rpx;
		width: 70%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		/* background-color: #F0AD4E; */
		/* display: flex; */
	}

	.process-num {
		height: 40rpx;
		width: 100%;
		/* background-color: #09BB07; */
		text-align: center;
	}

	.process-num-text {
		font-size: 24rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.process-item {
		height: 20rpx;
		width: 20%;
		background-color: #4B788D;
		background: linear-gradient(45deg, rgba(75, 120, 141, 1), rgba(255, 255, 255, 0.8));
		border-radius: 200rpx;
	}

	.item-image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
		margin-top: 44rpx;
		margin-right: 15rpx;
	}

	.item-text {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 400;
		margin-top: 38rpx;
		color: #FFFFFF;
	}

	.item-right {
		width: 25%;
		height: 100%;
		margin-top: 38rpx;
		float: right;
	}

	.jian-btn {
		float: right;
	}

	.add-btn {
		float: right;
	}


	.jn-btn {
		width: 60rpx;
		line-height: 55rpx;
		height: 60rpx;
		text-align: center;
		margin-right: 24rpx;
		border: 1px solid #4C798E;
		border-radius: 50%;
		color: #FFFFFF;
	}



	.bottom {
		margin-top: 60rpx;
		width: 100%;
		display: flex;
	}

	.bottom-left {
		width: 50%;
		/* background-color: #0000FF; */

	}

	.bottom-right {
		/* background-color: #008000; */
		width: 50%;
	}

	.btn {
		text-align: center;
		width: 220rpx;
		height: 70rpx;
		border: 2rpx solid #728C98;
		border-radius: 35rpx;
		line-height: 70rpx;
	}

	.reset-btn {
		float: right;
		margin-right: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #728C98;
	}

	.save-btn {
		float: left;
		margin-left: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}


	.num {
		width: 90%;
		color: #728C98;
		font-size: 20rpx;
		margin-right: 25rpx;
		padding-bottom: 30rpx;
		margin-top: 20rpx;
		border-bottom: solid 1px #405C69
	}

	.num-left {
		float: left;
		width: 50%;
		height: 100%;
	}

	.num-right {
		float: right;
		width: 50%;
		height: 100%;
		text-align: right;
	}

	.num-left-text {
		margin-left: 70rpx;
		float: left;
		line-height: 40rpx;
	}

	.level-input {
		width: 87rpx;
		height: 40rpx;
		background: #405C69;
		border-radius: 4rpx;
		text-indent: 10rpx;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.input-placeholder {
		color: #FFFFFF;
	}

	.info1 {
		width: 100%;
		margin-top: 60rpx;
		/* display: flex; */
		/* background-color: #09BB07; */
	}

	.info1-item {
		width: 33.333%;
		height: 100rpx;
		float: left;
		/* background-color: #0000FF; */

	}

	.info1-text {
		margin-left: 30rpx;
		font-size: 32rpx;
		font-weight: 400;
	}

	.info1-title {
		color: #FFFFFF;
	}

	.info1-value {
		color: #F1EF41;
	}

	.cu-progress {
		background-color: transparent;
	}
	
	.cu-modal {
		z-index: 10002;
	}
	
	.cu-modal .cu-dialog {
		width: 600rpx;
	}
	
	.cu-bar .content {
		background-color: #ffffff;
		display: initial;
		/* color: #1cbbb4; */
	}
	
	.uni-modal {
		z-index: 10002;
	}
	.padding-tb-xs
	{
		margin-left: 60rpx;
		margin-right: 60rpx;
	}
	.text-yellow
	{
		width: 100rpx;
	}
</style>
